import { Card, Col, Row, Table } from "antd";
import React, { useEffect, useState, useRef } from "react";
import { useSelector } from "react-redux";
import { getProductList } from "@/api/product/product";
import * as echarts from "echarts";
import { useSize } from "ahooks";
import Picture from "./picture";
// import { Map, Marker } from "react-amap";
import Map from "./map";

export default function Index() {
  const adminname = useSelector((state) => state.admin.adminname);
  const role = useSelector((state) => state.admin.role);
  const checkedKeys = useSelector((state) => state.admin.checkedKeys);
  const [ProductList, setProductList] = useState([]);
  const ref = useRef(null);
  const size = useSize(ref);
  const defaultHeight = document.body.offsetHeight;

  const getProductListDate = () => {
    getProductList().then((res) => {
      setProductList(res.data.data);
    });
  };

  useEffect(() => {
    getProductListDate();
  }, []);
  useEffect(() => {
    let myChart = echarts.init(document.getElementById("kucun"));
    window.addEventListener("resize", function () {
      myChart.resize();
    });
    myChart.setOption({
      xAxis: {
        type: "category",
        data: ProductList.map((item) => {
          return item.brand;
        }).slice(0, 5),
      },
      yAxis: {
        type: "value",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      series: [
        {
          data: ProductList.map((item) => {
            return item.stock;
          }).slice(0, 5),
          type: "bar",
        },
      ],
    });
  }, [ProductList]);
  const columns = [
    {
      title: "产品",
      dataIndex: "brand",
      width: 100,
    },
    {
      title: "销售金额",
      dataIndex: "sales",
      width: 100,
    },
  ];
  return (
    <Row gutter={16}>
      <Col span={8}>
        <Card title="用户详情" bordered={false}>
          <div
            style={{
              display: "flex",
              justifyContent: "space-around",
              alignItems: "center",
            }}
          >
            <div>
              <Picture />
            </div>
            <span>
              <h1>{adminname}</h1>
              <div>{role === 1 ? "管理员" : "超级管理员"}</div>
            </span>
          </div>
        </Card>
      </Col>
      <Col span={9}>
        <Card title="商品库存" bordered={false} ref={ref}>
          <div
            id="kucun"
            style={{
              height: 460,
            }}
          ></div>
        </Card>
      </Col>
      <Col span={7}>
        <Card title="销售金额" bordered={false}>
          <Table
            rowKey={(record) => record.proid}
            width={100}
            columns={columns}
            dataSource={ProductList}
            scroll={{
              y: (size ? size.height : defaultHeight) - 160,
            }}
            pagination={false}
          />
        </Card>
      </Col>
      <Col
        span={8}
        style={{
          marginTop: -324,
        }}
      >
        <Card title="定位" bordered={false}>
          <Map />
        </Card>
      </Col>
    </Row>
  );
}
